<!DOCTYPE html>
<html style="height: 100%" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>旅游论坛热门景点</title>
</head>
<body>
<!--样式资源-->
<div th:insert="style :: style"></div>
<!--样式资源-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Ly论坛</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/home/index"><i class="icon-home"></i> 首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#"><i class="icon-fire"></i> 热门景点</a></li>
                <li><a href="/home/forum/index"><i class="icon-star-half-empty"></i> 论坛版块</a></li>
                <li><a href="/home/safe/index"><i class="icon-book"></i> 安全知识</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="hidden" th:value="${session.id}" id="uid">
                    <input type="text" class="form-control" placeholder="城市/景点" id="search">
                </div>
                <button type="button" onclick="if($('#search').val() !== ''){getScenic($('#search').val());}else{alert('请输入搜索关键字!')};" class="btn btn-default"><i class="icon-search"></i> </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="dropdown-toggle" onclick="showMessage()" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="icon-envelope">&nbsp;<small id="messagenums"></small></i> </a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="icon-user"></i> <span th:text="${session.nickname}"></span> <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/home/user}"><i class="icon-home"></i> 个人主页</a></li>
                        <li><a th:href="@{/home/set}"><i class="icon-cog"></i> 设置</a></li>
                        <li><a onclick="user.homeLogout()"><i class="icon-signout"></i> 注销</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><i class="icon-wrench"></i> 帮助</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div id="content"  style="padding-bottom: 30px">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-8">
            <div class="row" id="value">
            </div>
            <div class="row" id="list">
            </div>
        </div>
        <div class="col-md-3">
            <div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>快捷搜索</legend>
                </fieldset>
            </div>
            <div>
            </div>
            <select class="selectpicker show-menu-arrow" data-live-search="true" data-header="快捷选择国家/城市/景点"  id="kjsearch">
                <optgroup label="国家">
                    <option>中国</option>
                    <option>美国</option>
                    <option>法国</option>
                    <option>日本</option>
                    <option>德国</option>
                    <option>俄罗斯</option>
                    <option disabled>更多请在导航栏搜索</option>
                </optgroup>
                <optgroup label="城市">
                    <option>重庆</option>
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>香港</option>
                    <option>天津</option>
                    <option disabled>更多请在导航栏搜索</option>
                </optgroup>
                <optgroup label="景点">
                    <option>故宫</option>
                    <option>长城</option>
                    <option>好莱坞环球影城</option>
                    <option>洛杉矶迪士尼乐园</option>
                    <option>巴黎铁塔</option>
                    <option>卢浮宫</option>
                    <option>埃菲尔铁塔</option>
                    <option disabled>更多请在导航栏搜索</option>
                </optgroup>
            </select>
            <button class="btn btn-primary" onclick="{getScenic($('#kjsearch').val())}">搜索</button>
        </div>
    </div>
</div>

<!--页脚-->
<div th:insert="~{footer :: footer}"></div>
<!--页脚-->

<script type="text/javascript">

   let getScenic = function(value) {
        layui.use('layer', function() {
            let load = layer.load(2);
            axios.get(GET_SCENIC+value)
                .then(function (response) {
                    if(response.data.response.length !== 0){
                        let str = "";
                        $.each(response.data.response,function (index,item) {
                            str += '     <fieldset class="layui-elem-field">\n' +
                                '                <legend>'+item[0]+'</legend>\n' +
                                '                <div class="layui-field-box">\n' +
                                '                    <div class="col-md-2" style="height: auto">\n' +
                                '                        <img  class="img-thumbnail" src="'+item[3]+'">\n' +
                                '                    </div>\n' +
                                '                    <div class="col-md-6" style="margin-left: -10px">\n' +
                                '                        <h3>'+item[0]+'</h3>\n' +
                                '                        <p style="margin-top: 3%;"><span style="color: red">'+item[1]+'景区</span> <span>'+item[2]+'</span> <span style="color: gold">'+item[6]+'</span></p>\n' +
                                '                        <p style="margin-top: 1%"><span>地址: '+item[7]+'</span></p>\n' +
                                '                        <p style="margin-top: 1%"><span>'+item[9]+'</span></p>\n' +
                                '                        <p style="margin-top: 1%"><span>价格：￥'+item[4]+'起</span> <span>月销量：'+item[5]+'</span> <span><a href="'+item[10]+'" style="text-decoration: none;color: #00b4ef" target="_blank">点击查看详情</a></span></p>\n' +
                                '                    </div>\n' +
                                '                </div>\n' +
                                '            </fieldset>'
                        });
                        layer.close(load);
                        $("#list").html(str);
                    }else {
                        layer.close(load);
                        layer.msg("暂无推荐!")
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        });
    };
   getScenic("中国")
</script>
</body>
</html>
